<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
             <el-form-item label="年度" prop="year">
              <el-date-picker
                v-model="queryParams.year"
                type="year"
                format="yyyy"
                value-format="yyyy"
                placeholder="选择种植年度">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="水管机构" prop="orgCd" width="50px">
                <treeselect
                    v-model="queryParams.orgCd"
                    :options="xzqhOptions"
                    :normalizer="normalizer"
                    :show-count="true"
                    placeholder="行政区划"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['waterDistribution:wrPlanMonRiun:export']"
                >导出</el-button>

<!--                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport" v-hasPermi="['waterDistribution:wrPlanMonRiun:export']" >导入</el-button>-->
            </el-form-item>
        </el-form>

        <div class="tb_title" v-html="tableTitle"></div>
        <div class="tb_dw" >单位：<span class="hj_cl_blue">m³</span></div>

        <el-table v-loading="loading" stripe border :data="wrPlanMonStList" :header-cell-style="tableHeaderColor" show-summary :summary-method="getWrPlanMonRiunSum">
            <el-table-column label="序号" fixed="left" type="index" align="center" show-overflow-tooltip/>
            <el-table-column label="单位名称" fixed="left" width="160" align="left" prop="orgNm" show-overflow-tooltip/>
            <el-table-column label="1月" align="center" prop="month01" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month01 == 'null'?'--':scope.row.month01 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="2月" align="center" prop="month02" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month02 == 'null'?'--':scope.row.month02 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="3月" align="center" prop="month03" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month03 == 'null'?'--':scope.row.month03 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="4月" align="center" prop="month04" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month04 == 'null'?'--':scope.row.month04 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="5月" align="center" prop="month05" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month05 == 'null'?'--':scope.row.month05 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="6月" align="center" prop="month06" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month06 == 'null'?'--':scope.row.month06 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="7月" align="center" prop="month07" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month07 == 'null'?'--':scope.row.month07 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="8月" align="center" prop="month08" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month08 == 'null'?'--':scope.row.month08 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="9月" align="center" prop="month09" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month09 == 'null'?'--':scope.row.month09 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="10月" align="center" prop="month10" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month10 == 'null'?'--':scope.row.month10 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="11月" align="center" prop="month11" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month11 == 'null'?'--':scope.row.month11 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="12月" align="center" prop="month12" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.month12 == 'null'?'--':scope.row.month12 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="合计" align="center" prop="sum" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span class="hj_cl" >{{ scope.row.sum == 'null'?'--':scope.row.sum }}</span>
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

        <!--用户导入对话框-->
<!--        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">-->
<!--            <el-upload-->
<!--                ref="upload"-->
<!--                :limit="1"-->
<!--                accept=".xlsx, .xls"-->
<!--                :headers="upload.headers"-->
<!--                :action="upload.url + '?updateSupport=' + upload.updateSupport"-->
<!--                :disabled="upload.isUploading"-->
<!--                :on-progress="handleFileUploadProgress"-->
<!--                :on-success="handleFileSuccess"-->
<!--                :auto-upload="false"-->
<!--                drag>-->
<!--                <i class="el-icon-upload"></i>-->
<!--                <div class="el-upload__text">-->
<!--                将文件拖到此处，或<em>点击上传</em>-->
<!--                </div>-->
<!--                <div class="el-upload__tip" slot="tip">-->
<!--                    <el-date-picker clearable size="small" style="width:100%;" v-model="upload.updateSupport" type="year" value-format="yyyy"-->
<!--                        placeholder="选择修改时间"></el-date-picker>-->
<!--                    <el-link type="info" style="font-size: 12px; display: block; margin-top: 10px; " @click="importTemplate">下载模板</el-link>-->
<!--                </div>-->
<!--                <div class="el-upload__tip" style="color: red" slot="tip">-->
<!--                提示：仅允许导入“xls”或“xlsx”格式文件！-->
<!--                </div>-->
<!--            </el-upload>-->
<!--            <div slot="footer" align="center">-->
<!--                <el-button type="primary" @click="submitFileForm">确 定</el-button>-->
<!--                <el-button @click="upload.open = false">取 消</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
  import { getOrgPlanYear, selectWrPlanMonRiunSum } from "@/api/waterDistribution/wrPlanMonRiun";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import { organtreeList } from "@/api/common";
  import { getToken } from "@/utils/auth";

  export default {
    name: "WrPlanMonSt",
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 年份选择
        yearList: [],
        // 行政区用水月计划表格数据
        wrPlanMonStList: [],
        // 行政区划树选项
        xzqhOptions: [],
        // 弹出层标题
        title: "",
        // 列表标题行内容
        tableTitle: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          // pageNum: 1,
          // pageSize: 10,
          year: null,
          orgCd: 'ORG6543220000'
        },
        // 合计统计
        sums: [],
        // 测站导入参数
        upload: {
            // 是否显示弹出层（用户导入）
            open: false,
            // 弹出层标题（用户导入）
            title: "",
            // 遮罩层

            // 是否禁用上传
            isUploading: false,
            // 是否更新已经存在的测站数据
            updateSupport: "",
            // 设置上传的请求头部
            headers: { Authorization: "Bearer " + getToken() },
            // 上传的地址
            url: process.env.VUE_APP_BASE_API + "/distribute/distribute/wrPlanMonRiun/importData/",
        },
      };
    },
    created() {
        let rq = new Date();
        this.upload.updateSupport = rq.getFullYear()+"";
      this.getList();
    },
    mounted() {
      this.getTreeselect();
    },
    methods: {
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "合作社用水计划表导入";
            this.upload.open = true;
        },
        /** 下载模板操作 */
        importTemplate() {
        this.download(
            "/distribute/distribute/wrPlanMonRiun/importTemplate",
            {
            ...this.queryParams,
            },
            `测站基础信息表.xlsx`
        );
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
        },
        // 提交上传文件
        submitFileForm() {
        this.$refs.upload.submit();
        },
      /** 查询行政区用水月计划列表 */
      getList() {
        this.loading = true;
        if(this.queryParams.year == null) {
          var day = new Date();
          var nowYear = day.getFullYear().toString();
          this.queryParams.year = nowYear;
        }
        this.tableTitle = this.queryParams.year + "年度富蕴县各用水合作社用水计划表";
        this.getListSum();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        // this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('distribute/WiOrgplanM/export', {
          ...this.queryParams
        }, `富蕴县 ` + this.queryParams.year + `年度灌区用水计划表.xlsx`)
      },
      /** 修改table header的背景色 */
      tableHeaderColor(row, rowIndex) {
        return 'background-color: #e6f4f8; font-weight: 700px !important;';
      },
      // 列表末尾合计方法
      getListSum() {

          getOrgPlanYear(this.queryParams).then(response => {
            this.wrPlanMonStList = response.data;
            // this.total = response.total;
            this.loading = false;
          // });
        });
      },
      // 列表末尾合计方法
      getWrPlanMonRiunSum() {
        return this.sums;
      },
      /** 查询行政区域下拉树结构 */
      getTreeselect() {
        organtreeList().then((response) => {
          this.xzqhOptions = this.handleTree(response.data, "orgCd", "parentOrgCd");
        });
      },
      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.orgCd,
          label: node.orgNm,
          children: node.children,
        };
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .tb_title{
        // width: 430px;
        text-align: center;
        margin: 5px auto;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .tb_dw{
        font-size: 13px;
        position: absolute;
        top: 84px;
        right: 40px;
    }

    .hj_cl{
        font-weight: 700;
    }

    .hj_cl_blue {
        color: #1890ff !important;
        font-weight: 700;
    }

    .el-table__footer-wrapper tbody td.el-table__cell{
        font-weight: 700;
    }
    .el-table .el-table__footer-wrapper .cell{
        font-weight: 700;
    }

    .vue-treeselect__placeholder, .vue-treeselect__single-value {
        line-height: 30px;
    }

    .vue-treeselect {
        width: 215px;
        height: 30px;
        .vue-treeselect__control {
            height: 30px;
            .el-form-item--medium .el-form-item__content {
                line-height: 30px;
                .vue-treeselect__placeholder, .vue-treeselect__single-value {
                    line-height: 30px;
                }
            }
        }
    }

</style>
